<template>
  <div>
    <el-form-item label="封面" :prop="props.cover">
      <el-upload
        action=""
        list-type="picture-card"
        accept=".jpg,.jpeg,.png,.gif,.bmp,.webp"
        :limit="1"
        :on-exceed="handleExceed"
        :before-upload="beforeUpdata"
        :http-request="handleHttpRequest"
        :file-list="uploadFileList"
        :on-remove="Remove"
        :class="{ hide: hideUpload }"
      >
        <template #default>
          <el-icon class="upload_icon">
            <plus />
          </el-icon>
        </template>
        <template #file="{ file }">
          <div class="upload_img">
            <el-image :src="file.url"> </el-image>
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                <el-icon><zoom-in /></el-icon>
              </span>
              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                <el-icon><delete /></el-icon>
              </span>
            </span>
          </div>
        </template>
        <template #tip>
          <div class="el-upload__tip">
            <span>单张图片大小不超过2M，支持png；jpg；jpeg；gif等格式</span>
          </div>
        </template>
      </el-upload>
    </el-form-item>
    <el-dialog custom-class="pre_img_box" v-model="dialogVisible" width="800px">
      <el-image style="image_load" :src="dialogImageUrl"> </el-image>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive, defineProps, onUnmounted, computed } from 'vue'
  import { ElForm, ElMessage } from 'element-plus'
  import { Plus, ZoomIn, Download, Delete } from '@element-plus/icons-vue'
  import type { UploadFile } from 'element-plus/es/components/upload/src/upload'
  import { uploadFile2 } from '@/api/common'
  const emit = defineEmits(['submit'])

  const formRef = ref<InstanceType<typeof ElForm>>()
  const dialogImageUrl = ref('')
  const dialogVisible = ref(false)
  const disabled = ref(false)
  const uploadFileList = ref([])

  const hideUpload = computed(() => {
    return uploadFileList.value.length > 0
  })
  const props = defineProps(['cover'])
  const beforeUpdata = (file: any) => {
    const is2M = file.size / 1024 / 1024 <= 2
    if (!is2M) {
      ElMessage.warning(`上传的图片最大支持2M`)
      return false
    }
  }
  const handleRemove = (file: UploadFile) => {
    uploadFileList.value = uploadFileList.value.filter((item: any) => item.code !== file.code)
    emit('submit', uploadFileList.value)
  }
  const Remove = (file: UploadFile, list: UploadFile[]) => {
    uploadFileList.value = list
    emit('submit', list)
  }

  // 长传改变
  const handleHttpRequest = async ({file}: any) => {
    const params = {
      file: file ,
      fileName: file.name
    }
    const data: any = await uploadFile2(params)
    uploadFileList.value.push(data)
    emit('submit', uploadFileList.value)
  }
  const handleExceed = (file: UploadFile, list: UploadFile[]) => {
    ElMessage.warning(`当前限制选择 1个图片，本次选择了 ${file.length} 个文件，共选择了 ${file.length + list.length} 个图片`)
  }
  const handlePictureCardPreview = (file: UploadFile) => {
    dialogImageUrl.value = file.url!
    dialogVisible.value = true
  }
  // 主动暴露方法
  defineExpose({ uploadFileList })
</script>
<style lang="scss" scoped>
  .pre_img_box {
    height: 600px;
    :deep .el-dialog__body {
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      .image_load {
        display: block;
        margin: auto;
      }
    }
  }
</style>
<style>
  .hide .el-upload--picture-card {
    display: none;
  }
  .upload_icon {
    width: 140px;
    height: 90px;
  }
  .upload_img{
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
